<template>
  <div class="container h-p100">
    <transition :name="routerAni">
      <router-view @selectPersonCallBack="selectPersonCallBack" class="router-view of-y-s"></router-view>
    </transition>
    <div class="content h-p100 box box-ver">
      <div class="cause">
        <div class="box box-ac">
          <div class="title box-f1">报销说明</div>
          <div class="icon icon-edit"></div>
        </div>
        <textarea v-model="bizAccountBill.cause" placeholder="请填写报销说明" class="box"></textarea>
      </div>
      <div class="head box box-ac">
        <div class="tag box box-ac box-jc">
          <div class="icon icon-caibao-soukuan"></div>
          <div>收款信息</div>
        </div>
        <div>&nbsp;&nbsp;共：¥{{TOTAL}}</div>
      </div>
      <div class="box-f1 of-y-s person-list">
        <div v-for="(item, index) in personList" :value="item" :key="index" class="person-item">
          <div class="header box box-ac">
            <div class="box-f1">{{item.userName}}</div>
            <div @click="deletePerson(index)" class="icon icon-close"></div>
          </div>
          <div class="line box box-ac">
            <div class="box-f1">报销金额</div>
            <input v-limit-money v-model="item.total" class="tx-r" />
            <div class="icon icon-edit"></div>
          </div>
          <div class="line box box-ac">
            <div class="box-f1">收款账户</div>
            <div>{{item.payeeAccount}}</div>
          </div>
          <div class="line box box-ac">
            <div >收款银行</div>
            <div class="box-f1 tx-r ell">{{item.payeeBank}}</div>
          </div>
        </div>
        <div @click="addBankEntrys()" class="box box-ac person-add">
          <div class="tc-main">添加收款人&nbsp;</div>
          <div class="icon icon-add-blue"></div>
        </div>
      </div>
      <div class="bottom box box-ac">
        <div v-if="!bizAccountBill.state || bizAccountBill.state == 20" @click="handleSubmit(0)" class="btn box box-f1 box-ac box-jc w-p100">暂存</div>
        <div v-if="bizAccountBill.state == 25" @click="abandonNewBills()" class="btn box box-f1 box-ac box-jc w-p100">废弃</div>
        <div @click="handleSubmit(1)" class="btn box box-f1 box-ac box-jc w-p100">发起K2</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { abandonNewBills } from '@/assets/js/api'
import { formatDate, getBillConfig, getJMByBillNum } from '@/assets/js/common'
export default {
  name: 'caiBaoStep3',
  data () {
    return {
      TOTAL: '',
      personList: []
    }
  },
  computed: {
    ...mapState(['userNum', 'userInfo', 'bizAccountBill', 'evectionExpense', 'routerAni'])
  },
  mounted () {
    this.initPersonList()
  },
  methods: {
    initPersonList () {
      let personList = []
      let TOTAL = 0 // 所有人的金额总和
      this.bizAccountBill.marchInfos.forEach(item => {
        item.travelPerson.forEach(person => {
          // console.log(person)
          let hasPerson = false
          let hasPersonIndex = null
          personList.forEach((item1, index1) => {
            if (item1.userNum === person.userNum) {
              hasPerson = true
              hasPersonIndex = index1
            }
          })
          let total = +(person.jtTotal || 0) + +(person.qtTotal || 0) + +(person.zsTotal || 0)
          if (total > 0) {
            TOTAL += total
            if (hasPerson) {
              personList[hasPersonIndex].total += total
            } else {
              person.userNum = person.userNum
              person.total = total
              personList.push(person)
            }
          }
        })
      })
      this.personList = personList
      this.TOTAL = TOTAL
      personList.forEach((item, index) => {
        this.getAccountBank(index)
      })
    },
    selectPersonCallBack (item) {
      let hasPerson = false
      this.personList.forEach(item1 => {
        if (item1.userNumber === item.userNumber) {
          hasPerson = true
        }
      })
      if (hasPerson) return
      this.personList.push({
        total: 0,
        userNum: item.userNumber,
        ...item
      })
      let len = this.personList.length
      this.getAccountBank(len - 1)
    },
    deletePerson (index) {
      this.personList.splice(index, 1)
    },
    addBankEntrys () {
      this.$router.push({
        path: '/caiBaoStep3/xinCenPersonSelect',
        query: {
          from: 'caiBaoStep3'
        }
      })
    },
    getAccountBank (index) {
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getAccountBank',
          userNum: this.personList[index].userNum
        }
      }).then(res => {
        if (res.code === 200) {
          this.personList[index] = Object.assign(this.personList[index], res)
          this.$forceUpdate()
        }
      })
    },
    setAccount () {
      // window.open(this.$config.url.bxaccount)
      location.href = this.$config.url.bxaccount
    },
    handleSubmit (isSubmit) {
      if (+this.bizAccountBill.state === 25) {
        this.initK2()
        return
      }
      let Datas = {
        mainInfo: {},
        accommodationFees: [], // 所选发票中的专票合集
        marchInfos: [],
        accountBankEntrys: [] // 收款信息
        // einvoiceId: [] // 发票id合集
      }
      Datas.mainInfo = {
        CAUSE: this.bizAccountBill.cause,
        NUMBER: this.bizAccountBill.billNum, // 差报单号
        SOURCEBILLID: this.bizAccountBill.marchInfos[0].number, // 行程单号
        TEL: '',
        POSTADDRESS: '',
        PAYACCOUNTID: '',
        CFTAXPAYERIDENTIFICATION: '',
        isFromApp: '2'
        // FTAXPAYERNAME: '',
        // FTAXPAYERQUALIFICATION: ''
      }
      this.bizAccountBill.marchInfos.forEach(item => {
        let { cause, countDateNum, from, number, to } = item
        item.travelPerson.forEach(person => {
          let { startDate, endDate } = person
          if (person.total && Number(person.total) > 0) {
            let {
              TAXIEXPENSE,
              BUSSESEXPENSE,
              EVENTIONSUBSIDY,
              CFGOBACKFLY,
              OTHEREXPENSE,
              OTHERCAUSE,
              companyID,
              costID,
              expenseId,
              userNum,
              jtTotal,
              zsTotal,
              qtTotal,
              entryID
            } = person
            let CFTOTALAMOUNT = +(jtTotal || 0) + +(zsTotal || 0) + +(qtTotal || 0)
            let entryItem = {
              FROM: from,
              TO: to,
              STARTDATE: startDate.substring(0, 10),
              ENDDATE: endDate.substring(0, 10),
              VEHICLE: '高铁', // 出行方式
              TAXIEXPENSE: TAXIEXPENSE || '0', // 市内交通费
              BUSSESEXPENSE: BUSSESEXPENSE || '0', // 长途交通费
              CFGOBACKFLY: CFGOBACKFLY || '0', // 往返机场费用

              OTHEREXPENSE: OTHEREXPENSE || '0', // 其他费用
              otherCause: OTHERCAUSE || '0', // 其他费用说明
              EVENTIONSUBSIDY: EVENTIONSUBSIDY || '0', // 出差补贴

              HOTELEXPENSE: zsTotal || '0', // 住宿费

              EXPENSETYPEID: expenseId, // 费用类型
              COSTCENTERID: costID || '', // 部门
              COMPANYID: companyID || '', // 公司
              // AMOUNTBALANCE: '', // 未使用金额
              SOURCEAMOUNTBALANCE: 10000, // 源单据可用余额
              SOURCEBILLENTRYID: entryID, // 行程单单号
              // CFREQZHUSUSTATE: '', // 出差标准
              CFTOTALAMOUNT: CFTOTALAMOUNT, // 合计金额
              TRAVELPERSONID: userNum, // 出差人
              CFRealBaoxiaoAmount: zsTotal || '', // 住宿金额
              flightInfo: '0', // 飞机金额
              trainInfo: '0', // 火车
              selfDriver: '0', // 自驾
              busInfo: '0', // 汽车
              shipinfo: '0' // 轮船
              // NOTETAKING: '' // 记一笔单号集合
            }
            entryItem.schedules = []
            if (person.zsInvoice) {
              entryItem.schedules = person.zsInvoice.list.map(item => {
                let { tabid, invoicedate, invoicecode, invoicenum, invoiceamount, totalamount, detailsl } = item
                let accommodationFeesItem
                let schedulesItem
                detailsl = detailsl.replace(/%/g, '')
                // 01 专票
                if (item.invoicetype === '01') {
                  schedulesItem = {
                    tabid: tabid, // 发票id
                    INVOICEDATE: invoicedate, // 开票日期
                    INVOICECODE: invoicecode, // 发票代码
                    INVOICENUMBER: invoicenum, // 发票号码
                    VALOREMTAXTOTAL: totalamount, // 价税合计
                    ISDEDUCTIBLE: 1, // 是否可抵扣 专票-1 普票-0
                    TAXRATE: detailsl, // 税率
                    INVOICEAMOUNT: invoiceamount
                  }
                  accommodationFeesItem = {
                    tabid: tabid,
                    INVOICEDATE: invoicedate, // 开票日期
                    INVOICECODE: invoicecode, // 发票代码
                    INVOICENUMBER: invoicenum, // 发票号码
                    VALOREMTAXTOTAL: totalamount, // 价税合计
                    TAXRATE: detailsl // 税率
                  }
                } else {
                  // 04/10/空 普票 (纸质普票 + 电子普票)
                  schedulesItem = {
                    tabid: tabid,
                    INVOICEDATE: '', // 开票日期
                    INVOICECODE: '', // 发票代码
                    INVOICENUMBER: '', // 发票号码
                    VALOREMTAXTOTAL: invoiceamount || totalamount, // 价税合计
                    ISDEDUCTIBLE: 0, // 是否可抵扣 专票-1 普票-0
                    TAXRATE: 0, // 税率
                    INVOICEAMOUNT: invoiceamount // 发票金额
                  }
                  accommodationFeesItem = {
                    tabid: tabid,
                    INVOICEDATE: '', // 开票日期
                    INVOICECODE: '', // 发票代码
                    INVOICENUMBER: '', // 发票号码
                    VALOREMTAXTOTAL: invoiceamount || totalamount,
                    TAXRATE: 0
                  }
                }
                Datas.accommodationFees.push(accommodationFeesItem)
                return schedulesItem
              })
            }
            Datas.marchInfos.push(entryItem)
          }
        })
      })
      let einvoiceId = Datas.accommodationFees.map(item => {
        return item.tabid
      })
      if (einvoiceId.length === 0) {
        Datas.mainInfo.iseinvoice = 0
      } else {
        Datas.mainInfo.iseinvoice = 1
        Datas.mainInfo.einvoiceId = einvoiceId
      }
      let accountBankEntrys = []
      let total = 0
      let accountIsEmpty = 0
      this.personList.forEach(item => {
        if (!item.payeeBank || !/^[\d]+$/.test(item.payeeAccount)) {
          accountIsEmpty = 1
        }
        if (Number(item.total) > 0) {
          total += Number(item.total)
          accountBankEntrys.push({
            PAYEENAME: item.userName,
            PAYEEBANK: item.payeeBank,
            PAYEEACCOUNT: item.payeeAccount,
            AMOUNT: item.total,
            PAYEEID: item.userNum
          })
        }
      })
      if (accountIsEmpty === 1) {
        // return this.$tools.popup({
        //   tpl: 'alert',
        //   title: '提示',
        //   content: '收款账号不可为空，请您先在个人中心进行报销账户设置',
        //   buttons: ['取消', `<div class="tc-main">前往设置</div>`],
        //   buttonCallBack: index => {
        //     if (index === 1) this.setAccount()
        //   }
        // })
        return this.$tools.openToast({
          msg: '存在收款账户异常的收款信息，请检查收款银行及账户是否完整',
          duration: 3000
        })
      }
      if (total !== this.TOTAL) {
        return this.$tools.openToast({
          msg: '报销金额与收款金额不相等',
          duration: 3000
        })
      }

      Datas.accountBankEntrys = accountBankEntrys
      this.$store.commit('bizAccountBill', {
        Datas
      })
      console.log(Datas)
      // console.log(JSON.stringify(Datas))
      Datas = encodeURI(JSON.stringify(Datas))
      this.$http({
        url: this.$config.api.host,
        method: 'post',
        data: {
          method: 'saveOrSubmitBill',
          issubmit: isSubmit,
          userid: this.userNum,
          Datas
        }
      }).then(res => {
        if (res.code === 200) {
          this.$store.commit('bizAccountBill', {
            billNum: res.billFnumber
          })
          if (isSubmit === 0) {
            this.$store.commit('bizAccountBill', {
              state: 20
            })
            this.$tools.openToast({
              msg: '暂存成功',
              duration: 2000
            })
          } else {
            this.$store.commit('bizAccountBill', {
              state: 25,
              submitResponse: res
            })
            this.initK2()
          }
        } else {
          if (res.code === 500 && res.billnumber) {
            this.$store.commit('bizAccountBill', {
              state: 20,
              billNum: res.billnumber
            })
          }
          this.$tools.closeToast()
          this.$tools.openToast({
            msg: res.exception,
            duration: 5000
          })
        }
      })
    },
    initK2 () {
      let billNum = this.bizAccountBill.billNum
      let JM = getJMByBillNum(billNum)
      let billConfig = getBillConfig()
      let k2Data = {}
      let expenseTypeID = this.bizAccountBill.marchInfos[0].travelPerson[0].expenseId
      let expenseNum
      let submitResponse = this.bizAccountBill.submitResponse
      k2Data.billNum = billNum
      k2Data.BSID = billConfig[JM].BSID
      k2Data.BOID = submitResponse.billFid
      this.evectionExpense.forEach(item => {
        if (item.expenseTypeID === expenseTypeID) {
          expenseNum = item.expenseTypeNumber
        }
      })
      k2Data.ExpenseType = expenseNum
      k2Data.sCapital = this.TOTAL
      // 影像类型和影像号
      k2Data.barcode = submitResponse.IMAGENO
      k2Data.barcodeType = 1
      k2Data.sProcessSubject = this.userInfo.userNum + '_' + this.personList[0].expense + '_' + billConfig[JM]['title']
      // 拼接bodysJson
      k2Data.bodysJson = this.bodysJson({
        BudgetInfo: submitResponse.BudgetInfo,
        payWay: submitResponse.payWay,
        Fnumber: submitResponse.billFnumber,
        accountBankEntrys: this.bizAccountBill.Datas.accountBankEntrys,
        title: k2Data.sProcessSubject,
        userNum: this.userNum,
        userName: this.userInfo.userName,
        cause: this.bizAccountBill.cause,
        list: this.personList,
        creatDate: formatDate(new Date(), 'yyyy-MM-dd'),
        companyName: this.userInfo.companyName,
        depName: this.userInfo.depName
      })
      console.log('k2Data>>>', k2Data)
      sessionStorage.setItem('k2Data', JSON.stringify(k2Data))
      this.$router.push('/sendK2')
    },
    abandonNewBills () {
      abandonNewBills(this.bizAccountBill.billNum, () => {
        this.$store.commit('resetBizAccountBill')
        this.$router.replace('/')
      })
    },
    bodysJson (data) {
      /* eslint-disable */
      let {
        Fnumber,
        BudgetInfo,
        payWay,
        accountBankEntrys,
        title,
        cause,
        userNum, // 出差人
        userName,
        list,
        creatDate,
        companyName,
        depName
      } = data

      var detailStr = '' // 行程明细
      var allDay = 0 // 总天数
      var allbNum = 0 // 总出差补贴
      var allbWFfee = 0 // 往返总费用
      var allSNfee = 0 // 市内往返总费用
      var allchangtu = 0 // 长途总费用
      var alleveSubsidy = 0 // 住宿总标准
      var allactully = 0 // 总发票合计金额
      var allZSfee = 0 // 总住宿实际报销费用
      var alloNum = 0 // 总其它费用
      var Total = 0 // 总费用

      list.forEach(item => {
        let invoiceTotal = item.zsInvoice.money
        let Trasportation = ' '

        allbNum += Number(item.EVENTIONSUBSIDY || 0) // 总出差补贴
        allbWFfee += Number(item.CFGOBACKFLY || 0) // 往返总费用
        allSNfee += Number(item.TAXIEXPENSE || 0) // 市内往返总费用
        allchangtu += Number(item.BUSSESEXPENSE || 0) // 长途总费用
        // alleveSubsidy += Number(data[j].hotelExpense); // 住宿总标准
        alleveSubsidy = '' // 住宿总标准
        allactully += Number(invoiceTotal || 0); // 总发票合计金额
        allZSfee += Number(item.zsTotal || 0); // 总住宿实际报销费用
        alloNum += Number(item.OTHEREXPENSE || 0); // 总其它费用
        Total += Number(item.total || 0); // 总费用
        if (Number(item.total) > 0) {
          detailStr += '<TR>' +
            '<TD>' + item.expense + '</TD>' +
            '<TD>' + item.comName + '</TD>' +
            '<TD>' + item.costName + '</TD>' +
            '<TD>' + item.userName + '</TD>' +
            '<TD>' + item.startDate.split(' ')[0] + '</TD>' +
            '<TD>' + item.endDate.split(' ')[0] + '</TD>' +
            '<TD>' + item.from + '</TD>' +
            '<TD>' + item.to + '</TD>' +
            // '<TD>'+data[j].days+'</TD>'+
            // 出差补贴
            '<TD>' + Number(item.EVENTIONSUBSIDY) + '</TD>' +
            '<TD>' + Trasportation + '</TD>' +
            // 往返机场
            '<TD>' + (item.CFGOBACKFLY || '0') + '</TD>' +
            // 市内交通
            '<TD>' + (item.TAXIEXPENSE || '0') + '</TD>' +
            // 长途费用
            '<TD>' + (item.BUSSESEXPENSE || '0') + '</TD>' +
            // 住宿标准
            '<TD>' + Number(item.stayStard) + '</TD>' +
            // 发票合计金额
            '<TD>' + (invoiceTotal || '0') + '</TD>' +
            // 实际报销金额
            '<TD>' + (item.zsTotal || '0') + '</TD>' +
            // 其他费用
            '<TD>' + (item.OTHEREXPENSE || '0') + '</TD>' +
            // 合计
            '<TD>' + Number(item.total) + '</TD></TR>'
        }

      })

      // 费用信息
      let allFeeStr = '<TD><SPAN style=\'font-weight: bold;\'>'+ allbNum+'</SPAN></TD>'+
        '<TD></TD>'+
        '<TD><SPAN style=\'font-weight: bold;\'>'+allbWFfee+'</SPAN></TD>'+
        '<TD><SPAN style=\'font-weight: bold;\'>'+allSNfee+'</SPAN></TD>'+
        '<TD><SPAN style=\'font-weight: bold;\'>'+allchangtu+'</SPAN></TD>'+
        '<TD><SPAN style=\'font-weight: bold;\'>'+alleveSubsidy+'</SPAN></TD>'+
        '<TD><SPAN style=\'font-weight: bold;\'>'+allactully+'</SPAN></TD>'+
        '<TD><SPAN style=\'font-weight: bold;\'>'+allZSfee+'</SPAN></TD>'+
        '<TD><SPAN style=\'font-weight: bold;\'>'+alloNum+'</SPAN></TD>'+
        '<TD><SPAN style=\'font-weight: bold;\'>'+Total+'</SPAN></TD></TR>'

      //付款信息；
      let accountBankEntryStr = ''
      accountBankEntrys.forEach(item => {
        accountBankEntryStr += '<TR>'+
        '<TD>' + item.PAYEENAME + '</TD>' +
        '<TD>' + '职员' + '</TD>' +
        '<TD>' + item.PAYEEBANK + '</TD>' +
        '<TD>' + item.PAYEEACCOUNT + '</TD>' +
        '<TD>' + item.AMOUNT + '</TD>' +
        '<TD></TD>' +
        '<TD>未付款</TD></TR>'
      })

      // 预算信息
      let BudgetInfoStr = ''
      BudgetInfo.forEach(item => {
        BudgetInfoStr += '<TR>'+
          '<TD>'+item.applicationPro+'</TD>'+
          '<TD>'+item.group+'</TD>'+
          '<TD>'+item.factor+'</TD>'+
          '<TD>'+item.timeLine+'</TD>'+
          '<TD>'+item.CurrentBudget+'</TD>'+
          '<TD>'+item.actualAmount+'</TD>'+
          '<TD>'+item.availableBudget+'</TD></TR>'
      })

      let SB = '<TABLE width=\'100%\' align=\'center\' class=\'noprint\' id=\'toolbar\' bordercolor=\'#b0b0b0\' '+
        'bgcolor=\'#ffffff\' border=\'1\' cellspacing=\'0\' cellpadding=\'0\'>'+
        '<TABLE align=\'center\' style=\'width: 600px; height: 98%;\' border=\'0\' cellspacing=\'0\' '+
        'cellpadding=\'0\' valign=\'top\'>'+
        '<TBODY>'+
        '<TR>'+
        '<TD height=\'40%\' valign=\'top\'> '+
        '<TABLE width=\'604\' align=\'center\' style=\'margin: 1px; width: 100%; border-collapse: collapse;\' '+
        'border=\'0\' cellspacing=\'0\' cellpadding=\'0\'>'+
        '<TABLE width=\'604\' align=\'center\' bordercolor=\'#000000\' style=\'margin: 1px; border-collapse: collapse;\' '+
        'border=\'1\' cellspacing=\'0\' cellpadding=\'0\'>'+
        '<TBODY>'+
        '<TR>'+
        '<TD id=\'ctl00_PrintHolder_userControl\' colspan=\'4\'> '+
        '<DIV id=\'ctl00_PrintHolder_ctl00_txtEvectionReqFrameContent\' style=\'width: 100%; height: 100%;\'>'+
        '<STYLE type=\'text/css\'>.menuBar{display:inline-block;background:#e6e6e6;}.menuBar ul{list-style:none;}.menuBar li{float:left; width:100px; margin-left:3px; line-height:30px;}.menuBar a  {display:block; text-align:center; height:30px;}.menuBar a:link   {color:red; font-weight:bold; text-decoration:none; background:#e6e6e6;}.menuBar a:visited{color:red; font-weight:bold; text-decoration:none; background:#e6e6e6;}.menuBar a:hover  {color:green; font-weight:bold; text-decoration:none; background:#e6e6e6;}#base {background-color: #e6e6e6;}.panel{font-size:12px;text-align:left;margin-top:7px;}.panel.sheader{padding-top:5px;}.panel.sheader.titile {color:blue;font-weight: bold;}.panel.content {padding-top:5px;}.panel.content.block {width:100%;position:relative;margin-top:10px;}.panel.content.leftBlock {width:50%;float:left;vertical-align:top;}.panel.content.rightBlock {width:49%;float:right;vertical-align:top;}.ui-lablecontainer{padding-bottom:5px;padding-top:0px;padding-left:0px;padding-right:0px;margin:0px 10px;}.ui-lablecontainer.label{width:100px;display:inline-block;vertical-align:middle;}.ui-lablecontainer.value{display:inline-block;vertical-align:middle;overflow:hidden;}div{ word-wrap: break-word; word-break: normal;}</STYLE>'+
        '<DIV class=\'main\'>'+
        '<DIV class=\'menuBar\'>'+
        '</DIV>'+
        '<DIV class=\'panel\' id=\'topic\'>'+
        '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
        'onclick=\'showdiv(1)\'>+主题</A></SPAN></DIV>'+
        '<DIV class=\'contents\' id=\'contentPane1\' style=\'color: red; font-size: 16px; font-weight: bold;\'>'+
        '<DIV class=\'block\'>'+
        '<DIV class=\'ui-lablecontainer\' id=\'topic\'><LABEL '+
        'class=\'label\'><SPAN></SPAN></LABEL><SPAN '+
        'class=\'value\'>'+title+'</SPAN></DIV></DIV></DIV></DIV>'+
        '<DIV class=\'panel\' id=\'cause\'>+事由 <DIV class=\'ui-lablecontainer\' id=\'tel\'>'+
        '  <TR>'+
        '<TD style=\'color: red; font-size: 16px; font-weight: bold; -ms-word-break: break-all; \' colspan=4>'+cause+'</TD></TR></TBODY></TABLE></SPAN></DIV></DIV></DIV></DIV>'+
        '<DIV class=\'panel\' id=\'base\'>'+
        '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
        'onclick=\'showdiv(2)\'>+基本信息</A></SPAN></DIV>'+
        '<DIV class=\'contents\' id=\'contentPane2\'>'+
        '<DIV class=\'block\'>'+
        '<DIV class=\'leftBlock\'>'+
        '<DIV class=\'ui-lablecontainer\' id=\'number\'><LABEL '+
        'class=\'label\'><SPAN>单据编号:</SPAN></LABEL><SPAN '+
          'class=\'value\'>'+Fnumber+'</SPAN></DIV>'+
        '<DIV class=\'ui-lablecontainer\' id=\'applier\'><LABEL '+
        'class=\'label\'><SPAN>申请人:</SPAN></LABEL><SPAN '+
        'class=\'value\'>'+userName+'</SPAN></DIV>'+
        '<DIV class=\'ui-lablecontainer\' id=\'costedDept\'><LABEL '+
        'class=\'label\'><SPAN>费用支付部门:</SPAN></LABEL><SPAN '+
          'class=\'value\'>'+depName+'</SPAN></DIV>'+
        // '<DIV class=\'ui-lablecontainer\' id=\'postAddress\'><LABEL '+
        // 'class=\'label\'><SPAN>扫描点:</SPAN></LABEL><SPAN '+
        // 'class=\'value\'>'+'佛山地产扫描点'+'</SPAN></DIV></DIV>'+
          '<DIV class=\'rightBlock\'>'+
        '<DIV class=\'ui-lablecontainer\' id=\'bizReqDate\'><LABEL '+
        'class=\'label\'><SPAN>申请日期:</SPAN></LABEL><SPAN '+
        'class=\'value\'>'+creatDate+'</SPAN></DIV>'+
        '<DIV class=\'ui-lablecontainer\' id=\'company\'><LABEL '+
        'class=\'label\'><SPAN>费用支付公司:</SPAN></LABEL><SPAN '+
        'class=\'value\'>'+companyName+'</SPAN></DIV>'+
        '</DIV></DIV></DIV></DIV>'+
        '<DIV class=\'panel\' id=\'entry\'>'+
        '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
        'onclick=\'showdiv(4)\'>+行程清单</A></SPAN></DIV>'+
        '<DIV class=\'contents\' id=\'contentPane4\'>'+
        '<DIV class=\'block\'>'+
        '<TABLE width=\'100%\' border=\'1\'>'+
        '<TBODY>'+
        '<TR>'+
        '<TD>费用类型</TD>'+
        '<TD>预算(额度)归属公司</TD>'+
        '<TD>预算(额度)归属部门</TD>'+
        '<TD>出差人</TD>'+
        '<TD>出发日期</TD>'+
        '<TD>往返日期</TD>'+
        '<TD>出发地</TD>'+
        '<TD>目的地</TD>'+
      //  '<TD>天数</TD>'+
        '<TD>出差补贴</TD>'+
        '<TD>交通工具</TD>'+
        '<TD>往返机场交通费</TD>'+
        '<TD>市内交通费</TD>'+
        '<TD>长途费用</TD>'+
        '<TD>住宿标准</TD>'+
        '<TD>发票合计金额</TD>'+
        '<TD>实际报销金额</TD>'+
        '<TD>其他费用</TD>'+
        '<TD>合计金额</TD></TR>'+detailStr +
        '<TD style=\'text-align: center;\'><SPAN style=\'font-weight: bold;\'>合 '+
        '  计:</SPAN></TD>'+
        '<TD></TD>'+
        '<TD></TD>'+
        '<TD></TD>'+
        '<TD></TD>'+
        '<TD></TD>'+
        '<TD></TD>'+
        '<TD></TD>'+
        allFeeStr +
        '</TBODY></TABLE></DIV></DIV></DIV>'+
        '<DIV class=\'panel\' id=\'balance\'>'+
        '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
        'onclick=\'showdiv(5)\'>+财务信息</A></SPAN></DIV>'+
        '<DIV class=\'contents\' id=\'contentPane5\'>'+
        '<DIV class=\'block\'>'+
        '</DIV></DIV></DIV>'+
        '<DIV class=\'panel\' id=\'BankEntries\'>'+
        '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
        'onclick=\'showdiv(6)\'>+付款信息</A></SPAN></DIV>'+
        '<DIV class=\'contents\' id=\'contentPane6\'>'+
        '<DIV class=\'block\'>'+
        '<TABLE width=\'100%\' border=\'1\'>'+
        '<TBODY>'+
        '<TR>'+
        '<TD>收款人名称</TD>'+
        '<TD>收款人类型</TD>'+
        '<TD>收款银行</TD>'+
        '<TD>收款账号</TD>'+
        '<TD>金额</TD>'+
        '<TD>供应商核准状态</TD>'+
        '<TD>付款状态</TD></TR>'+accountBankEntryStr+
        '</TBODY></TABLE></DIV></DIV></DIV>'+
        '<DIV class=\'panel\' id=\'payInfo\'>'+
        '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
        'onclick=\'showdiv(8)\'>+付款方式</A></SPAN></DIV>'+
        '<DIV class=\'contents\' id=\'contentPane8\'>'+
        '<DIV class=\'block\'>'+
        '<DIV class=\'ui-lablecontainer\' id=\'payMode\' style=\'width: 30%; display: inline;\'><LABEL '+
        'class=\'label\' style=\'width: 60px;\'><SPAN>结算方式:</SPAN></LABEL><SPAN '+
        'class=\'value\'>'+payWay.method+'</SPAN></DIV>'+
        '<DIV class=\'ui-lablecontainer\' id=\'payAccount\' style=\'width: 30%; display: inline;\'><LABEL '+
        'class=\'label\' style=\'width: 60px;\'><SPAN>付款账号:</SPAN></LABEL><SPAN '+
        'class=\'value\'>'+payWay.payMent+'</SPAN></DIV>'+
        '<DIV class=\'ui-lablecontainer\' id=\'payBank\' style=\'width: 30%; display: inline;\'><LABEL '+
        'class=\'label\' style=\'width: 60px;\'><SPAN>付款银行:</SPAN></LABEL><SPAN '+
        'class=\'value\'>'+payWay.payMentBank+'</SPAN></DIV></DIV></DIV></DIV>'+
        '<DIV class=\'panel\' id=\'budget\'>'+
        '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
        'onclick=\'showdiv(0)\'>预算信息</A></SPAN></DIV>'+
        '<DIV class=\'content\' id=\'contentPane0\'>'+
        '<DIV class=\'block\'>'+
        '<TABLE width=\'100%\' border=\'1\'>'+
        '<TBODY>'+
        '<TR>'+
        '<TD>预算申请项目</TD>'+
        '<TD>组织</TD>'+
        '<TD>预算要素</TD>'+
        '<TD>预算期间</TD>'+
        '<TD>本期预算额</TD>'+
        '<TD>实际发生额</TD>'+
        '<TD>可用预算</TD></TR>'+BudgetInfoStr+
        '</TBODY></TABLE></DIV></DIV></DIV>'+
        '<DIV class=\'panel\' id=\'billInfo\'>'+
        '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
        'onclick=\'showdiv(7)\'>+制单信息</A></SPAN></DIV>'+
        '<DIV class=\'contents\' id=\'contentPane7\'>'+
        '<DIV class=\'block\'>'+
        '<DIV class=\'leftBlock\'>'+
        '<DIV class=\'ui-lablecontainer\' id=\'biller\'><LABEL '+
        'class=\'label\'><SPAN>制单人:</SPAN></LABEL><SPAN '+
        'class=\'value\'>'+userNum+'</SPAN></DIV></DIV>'+
        '<DIV class=\'rightBlock\'>'+
        '<DIV class=\'ui-lablecontainer\' id=\'billDate\'><LABEL '+
        'class=\'label\'><SPAN>制单日期:</SPAN></LABEL><SPAN '+
        'class=\'value\'>'+creatDate+'</SPAN></DIV></DIV></DIV></DIV></DIV></DIV>'+
        '</DIV></TD></TR>'+
        '</TBODY></TABLE>'
        return SB
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.icon-caibao-soukuan{
  width:.3rem;
  height:.3rem;
  @include bg-image('../assets/images/icon-caibao-soukuan');
}
.icon-close{
  width:.4rem;
  height:.4rem;
  @include bg-image('../assets/images/icon-person-delete');
}
.icon-add-blue{
  width:.4rem;
  height:.4rem;
  @include bg-image('../assets/images/icon-add-blue');
}
.cause{
  background-color:#FFF;
  margin:.2rem;
  margin-bottom:.2rem;
  padding:.2rem .5rem;
  font-size:.3rem;
  textarea{
    margin-top:.2rem;
    padding:.1rem;
    width:5.9rem;
    height:1rem;
    border:1px solid $borderColor;
    display:block;
    color:#666;
    font-size:.24rem;
  }
}

.head{
  height:.6rem;
  margin:0 .2rem;
  background-color:#FFF;
  border-bottom:.2rem solid #FFF;
  // border-bottom:1px solid $themeColor;
  .tag{
    height:.6rem;
    width:1.86rem;
    background-color:#97c6fa;
    color:#FFF;
    .icon{
      margin-right:.1rem;
    }
  }
}
.person-list{
  // border-top:1px solid $themeColor;
  background-color:#FFF;
  padding:0 .5rem .5rem .5rem;
  margin:0 .2rem;
}
.person-add{
  border-top:1px solid $borderColor;
  margin-top:.2rem;
  padding:.2rem 0;
}
.person-item{
  margin-top:.2rem;
  border-radius:.2rem;
  border:1px solid #999;
  overflow: hidden;
  font-size:.28rem;
  .header{
    padding:0 .2rem;
    background-color:#cde3fc;
    height:.7rem;
  }
  .line{
    margin:0 .2rem;
    height:.7rem;
    border-top:1px solid $borderColor;
    .icon-edit{
      width:.3rem;
      height:.3rem;
      margin-left:.1rem;
    }
  }
}
.bottom{
  width:100%;
  background-color: $themeColor;
  height:1rem;
  font-size:.36rem;
  .btn{
    color:#FFF;
    height:100%;
    &:nth-of-type(2){
      color:$themeColor;
      background-color:#FFF;
    }
  }
}
</style>
